<template>
  <uv-popup
    ref="authPopup"
    :closeOnClickOverlay="false"
    :safeAreaInsetTop="true"
    :customStyle="{ backgroundColor: 'transparent' }"
    @change="onChangePopup"
    @touchmove.stop.prevent=""
  >
    <view class="auth-popup-container">
      <!-- 自定义关闭按钮 -->
      <view class="close" @click="close"><uv-icon name="close-circle" color="#fff" size="24" /></view>
      <view class="login-warrap" :style="[contentStyle]">
        <view class="login-title"> {{ curAuthTypeKey ? AuthTypeEnum[curAuthTypeKey].name : '' }} </view>

        <!-- 手机验证码登录 -->
        <cu-login-mobile v-if="authType === AuthTypeEnum.MOBILE.type" @onSuccess="LoginSuccessCb" />

        <!-- #ifdef MP || H5 -->
        <!-- 绑定手机号 只用在小程序或公众号环境-->
        <!-- <cu-bind-mobile v-if="authType === AuthTypeEnum.BINDMOBILE.type && ['miniProgram', 'officialAccount'].includes($Platform.platform)" @onSuccess="LoginSuccessCb" /> -->
        <!-- #endif -->
      </view>
    </view>
  </uv-popup>
</template>
<script>
import { AuthTypeEnum } from '@/common/enums/userEnum'
import { mapGetters, mapActions } from 'vuex'
/**
 * props
 * @description
 * @property {Object} customStyle 自定义样式
 */
export default {
  name: 'cuAuthModal',
  mixins: [],
  props: {
    customStyle: {
      type: [Object, String],
      default: () => ({}),
    },
  },
  data() {
    return {
      AuthTypeEnum,
    }
  },
  watch: {
    // 监听是否弹出授权弹窗：没有登录情况下 && authMode != ''
    authMode: {
      handler(nv) {
        if (!this.isLogin && nv === 'modal') {
          !this.$refs.authPopup.showPopup && this.$refs.authPopup.open()
        }
      },
    },
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'authMode', 'authType']),

    curAuthTypeKey() {
      let AuthTypeKey = ''
      for (const key in AuthTypeEnum) {
        if (AuthTypeEnum[key].type === this.authType) {
          AuthTypeKey = key
          break
        } else AuthTypeKey = ''
      }
      return AuthTypeKey
    },

    //
    contentStyle() {
      const style = {}

      return uni.$uv.deepMerge(style, uni.$uv.addStyle(this.customStyle))
    },
  },
  methods: {
    ...mapActions('modal', ['SetAuthMode', 'SetAuthType']),

    onChangePopup(e) {
      // console.log(e)
      // 若启用pages.js中配置底部菜单则释放此处注释
      // const { path } = this.$Route
      // if (this.authMode === 'modal' && TABBAR.includes(path)) {
      //   this.authType ? uni.hideTabBar() : uni.showTabBar()
      // }
    },

    // 关闭
    close() {
      this.SetAuthMode()
      this.SetAuthType()
      this.$refs.authPopup.close()
    },

    LoginSuccessCb() {
      this.close()
    },
  },
}
</script>
<style lang="scss" scoped>
.auth-popup-container {
  position: relative;
  width: calc(100vw - 60px);
  padding-top: 35px;
  .close {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 0;
    top: 0;
    border-radius: 50%;
    overflow: hidden;
  }
  .login-warrap {
    min-height: 250px;
    max-height: 400px;
    padding: 10px 15px 20px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    overflow: auto;
    .login-title {
      margin-top: 30rpx;
      font-size: 36rpx;
      text-align: center;
    }
  }
}
</style>
